<template>
  <div class="login_mian">
    <div class="main_R" v-if="!isLogin">
      <div class="main_R-t">
        <h3>会员登录</h3>
      </div>
      <div class="main_R-c">
        <ul>
          <li
            class="changeHanld"
            v-for="(item, index) in switchover"
            :key="index"
            :class="currenIndex == index ? 'active' : ''"
            @click="currenIndex = index"
          >{{ item }}</li>
        </ul>
        <mobileLogin v-show="currenIndex == 0" v-on:jieshou="zhivalue" />
        <passwordLogin v-show="currenIndex == 1" v-on:jieshou="zhivalue" />
      </div>
      <div class="main_R-b">
        <span>第三方登录</span>
        <img
          class="changeHanld"
          src="../../../static/image/login/wechat.png"
          alt
          @click="scanLogin"
        />
      </div>
    </div>
    <loginCode v-show="isLogin" :isLogin="isLogin" @isShowCode="changeShow" />
  </div>
</template>

<script>
import loginCode from "../../components/login_item/loginCode.vue";
import mobileLogin from "../login_item/mobileLogin.vue";
import passwordLogin from "../login_item/passwordLogin.vue";
export default {
  components: {
    passwordLogin,
    mobileLogin,
    loginCode
  },
  data() {
    return {
      isLogin: false, // 是否显示二维码弹框
      userinfo: {
        password: "",
        phoneNumber: "",
        // password: "12345678",
        // phoneNumber: "18666187888",
        code: ""
      },
      showCode: true,
      erruserName: false,
      errPwd: false,
      isShowdislog: false,
      val: 60,
      currenIndex: 0,
      switchover: ["快捷登录", "密码登录"]
    };
  },
  methods: {
    // 点击第三方登录
    scanLogin() {
      this.isLogin = true;
    },
    changeShow(val) {
      this.isLogin = val;
    },
    zhivalue(value) {
      this.$emit("control", value);
    },
    //   // 点击倒计时
    //   getCode() {
    //     let times = null;
    //     this.showCode = false;
    //     this.getphoneCode();
    //     times = setInterval(() => {
    //       this.val--;
    //       if (this.val == 0) {
    //         this.showCode = true;
    //         clearInterval(times);
    //       }
    //     }, 1000);
    //   },
    //   // 获取验证码
    //   getphoneCode() {
    //     commonRequest(
    //       "/api/ums/umsUsers/sendVerificationCode?type=Login&phoneNumber=" +
    //         this.userinfo.phoneNumber
    //     ).then((res) => {
    //       // console.log(res);
    //       if (res == "成功!") {
    //         this.$message({
    //           type: "success",
    //           message: "发送成功,请注意查收",
    //         });
    //       } else {
    //         this.$message({
    //           type: "warning",
    //           message: "发送失败,请重试",
    //         });
    //       }
    //     });
    //   },

    //   ...mapActions(["handleLogin"]),

    //   // 立即注册
    registerNow() {}
    //   saveTime() {
    //     // 没有勾选  保持一天
    //     let startTime = +new Date();
    //     let endTime = "";
    //     let ischecked = document.querySelector("input.input").checked;
    //     console.log(ischecked);
    //     if (ischecked) {
    //       // 勾选
    //       endTime = startTime + 24 * 60 * 60 * 1000 * 30; // (一天的时间戳*30)
    //       localStorage.setItem("endTime", endTime);
    //       // if (endTime > +new Date()) {
    //       //   localStorage.removeItem("saasToken");
    //       // }
    //     } else {
    //       // 没有勾选
    //       endTime = startTime + 24 * 60 * 60 * 1000 * 6; // 保留一天;
    //       localStorage.setItem("endTime", endTime);
    //       // if (endTime > +new Date().toString()) {
    //       //   localStorage.removeItem("saasToken");
    //       // }
    //     }
    //   },
  }
};
</script>

<style lang="less" scoped>
.main_R {
  width: 360px;
  height: 460px;
  background-color: #fff;
  .main_R-t {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 90px;
    background-image: url("../../../static/image/login/banner3.png");
    h3 {
      color: #44a2ff;
      font-size: 20px;
      font-weight: 400;
    }
  }
  .main_R-c {
    // padding: 0 30px;
    ul {
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-around;
      li {
        position: relative;
        color: #9fa19f;
        font-size: 18px;
        &.active {
          color: #44a2ff;
          &::before {
            position: absolute;
            left: 0;
            bottom: -12px;
            border-radius: 2px;
            content: "";
            width: 70px;
            height: 3px;
            background-color: #44a2ff;
          }
        }
      }
    }
    // div {
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   height: 50px;
    //   border-bottom: 1px solid #ccc;
    //   input {
    //     color: #000;
    //     font-size: 16px;
    //     width: 150px;
    //     &::placeholder {
    //       color: #ccc;
    //     }
    //   }
    //   .input {
    //     width: 15px;
    //     height: 15px;
    //     border: 1px solid #ccc;
    //   }
    //   span {
    //     color: #44a2ff;
    //     font-size: 14px;
    //   }
    //   &.check {
    //     border: none;
    //     display: flex;
    //     justify-content: flex-start;
    //     font-size: 14px;
    //     input {
    //       margin-right: 5px;
    //     }
    //   }
    // }
    // button {
    //   width: 100%;
    //   background-color: #ccc;
    //   font-size: 16px;
    //   color: #fff;
    //   height: 48px;
    //   border-radius: 6px;
    //   margin: 20px auto;
    //   &.active {
    //     background-color: #44a2ff;
    //   }
    // }
    // .islogin {
    //   display: flex;
    //   justify-content: space-between;
    //   border: none;
    //   font-size: 14px;
    // }
    // .forget {
    //   color: #ccc;
    // }
  }
  .main_R-b {
    display: flex;
    align-items: center;
    height: 80px;
    padding-left: 10px;
    background-image: url("../../../static/image/login/banner3.png");
    span {
      font-size: 14px;
      color: #44a2ff;
    }
    img {
      width: 20px;
      margin: 0 15px;
    }
  }
}
.bgLoar {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 999;
  background-color: #333;

  .clone_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    color: #fff;
  }
  .content {
    width: 400px;
    height: 400px;
    // border: 1px solid rgb(83, 82, 82);
    position: relative;
    top: 80px;
    left: 50%;
    right: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .bg_title {
      font-size: 26px;
      color: #fff;
    }
    .bg_image {
      width: 250px;
      img {
        width: 100%;
      }
    }
    .bg_text {
      height: 70px;
      width: 350px;
      background-color: #232323;
      padding: 10px 20px;
      border-radius: 50px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }
  }
}
</style>
